<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="我的银行卡"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <div
                class="card-empty-tips"
                v-if="cardList.length == 0"
            >{{emptyTips}}</div>

            <div
                class="go-add-card"
                v-if="noCard"
                @click="goAddCard"
            >立即绑定银行卡</div>

            <div
                class="card-item"
                v-for="(item,index) of cardList"
                :key="index"
            >
                <img
                    class="bank-card-icon"
                    src="@/assets/images/card/bank-card-icon.png"
                />
                <div class="bank-card-info">
                    <div class="bank-card-name">{{item.bank_name}} {{item.bank_branch}}</div>
                    <div class="bank-card-num">{{item.bank_card}}</div>
                </div>
                <common-radio
                    radioName="cardPay"
                    @radioClick="radioClick(item.id)"
                ></common-radio>
            </div>

        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <div
            class="sure-btn"
            @click="sureSelect"
        >确定</div>
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
import CommonRadio from '@/components/Radio'
export default {
    name: 'CardSelect',
    components: {
        CommonHeader,
        CommonScroll,
        CommonRadio
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '1.33rem'
            },
            cardList: [],
            emptyTips: '正在全力加载中...',
            payMethods: '',
            noCard: false,
            selectCardId: ''
        }
    },
    mounted() {
        this.getCardList()
    },
    methods: {
        getCardList() {
            this.axios.post('/api/user/bank/list.json').then(res => {
                const data = res.data
                if (data.status == 1) {
                    if (data.data.list.length == 0) {
                        this.emptyTips = '暂无绑定银行卡'
                        this.noCard = true
                    }
                    this.cardList = data.data.list
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        radioClick(cardId) {
            this.selectCardId = cardId
        },
        goAddCard() {
            this.$router.push('/addCard')
        },
        sureSelect() {
            const that = this
            if (this.$route.query.selectType == 'refundDeposit') {
                let postData = this.qs.stringify({
                    bank_id: this.selectCardId
                })
                this.axios
                    .post('/api/user/agent/deposit_refund.json', postData)
                    .then(res => {
                        const data = res.data
                        if (data.status == 1) {
                            this.commonDialog.alert(
                                '提示',
                                '申请已提交，请耐心等候！'
                            )
                        } else {
                            this.commonDialog.alert('提示', data.msg)
                        }
                    })
            } else if (this.$route.query.selectType == 'withDraw') {
                let postData = this.qs.stringify({
                    money: this.$route.query.withdrawMoney,
                    bank_id: this.selectCardId
                })
                this.axios
                    .post('/api/user/money/take_out_apply.json', postData)
                    .then(res => {
                        const data = res.data
                        if (data.status == 1) {
                            this.commonDialog.alert(
                                '提示',
                                '申请已提交，请耐心等候！',
                                function() {
                                    that.$router.push('/userCenter/userAccount')
                                }
                            )
                        } else {
                            this.commonDialog.alert('提示', data.msg)
                        }
                    })
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.card-empty-tips
    height 2rem
    line-height 2rem
    text-align center
    font-size 0.33rem
    color #999
.go-add-card
    margin 0 auto
    width 3rem
    line-height 0.9rem
    text-align center
    background #d7463c
    font-size 0.32rem
    color #fff
    border-radius 3px
.card-item
    display flex
    align-items center
    height 1.84rem
    padding 0 0.37rem
    background #fff
    border-bottom 1px solid #e5e5e5
    .bank-card-icon
        width 1.09rem
        height 1.09rem
    .bank-card-info
        flex 1
        margin-left 0.4rem
        pointer-events none
        .bank-card-name
            font-size 0.37rem
            color #333
        .bank-card-num
            font-size 0.32rem
            color #999
            margin-top 0.2rem
.sure-btn
    position absolute
    bottom 0
    left 0
    right 0
    height 1.33rem
    line-height 1.33rem
    text-align center
    background #d7463c
    font-size 0.37rem
    color #fff
</style>

